<template>
  <el-row>
    <el-col
      :span="24"
      class="paltform-container"
      :style="`height:${view.height}px`"
    >
      <!-- 标题头部 -->
      <div class="header">
        <div class="tit-warp">
          <span class="tit-name">灌区灌溉遥感动态监测系统</span>
        </div>
      </div>

      <!-- 导航按钮 -->
      <div class="tab-container">
        <div class="tab-box left-box">
          <div class="custom-button-warp">
            <div class="custom-button" @click="MPDIhandler">
              土含与蒸散发反演
            </div>
          </div>
          <div class="custom-button-warp">
            <div class="custom-button" @click="buttonHandler(3)">
              灌溉面积监测
            </div>
          </div>
        </div>
        <div class="tab-box middle-box"></div>
        <div class="tab-box right-box">
          <div class="custom-button-warp">
            <div class="custom-button" @click="buttonHandler(6)">灌溉水量监测</div>
          </div>
          <div class="custom-button-warp">
            <div class="custom-button" @click="buttonHandler(4)">多要素联合模拟</div>
          </div>
          <div class="custom-button-warp">
            <div class="custom-button active" @click="buttonHandler(5)">耗水过程解析</div>
          </div>
        </div>
      </div>

      <!-- 耗水过程解析列表面板 -->
      <div class="soil-et-panel" v-show="showDataPanel">
        <el-card class="data-card">
          <template #header>
            <div class="data-panel-header">
              <span>耗水过程解析成果</span>
              <el-button
                link
                @click="showDataPanel = false"
                :icon="Close"
                size="small"
              ></el-button>
            </div>
          </template>

          <!-- 筛选条件 -->
          <div class="filter-section">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-select
                  v-model="queryParams.irrigationArea"
                  placeholder="选择灌区"
                  size="small"
                  clearable
                  @change="loadData"
                >
                  <el-option label="石津灌区" value="石津灌区"></el-option>
                  <el-option label="河套灌区" value="河套灌区"></el-option>
                </el-select>
              </el-col>
              <el-col :span="8">
                <el-select
                  v-model="queryParams.etType"
                  placeholder="耗水过程解析数据类型"
                  size="small"
                  clearable
                  @change="loadData"
                >
                  <el-option label="降雨ET" value="降雨ET"></el-option>
                  <el-option label="灌溉ET" value="灌溉ET"></el-option>
                  <el-option label="其他ET" value="其他ET"></el-option>
                </el-select>
              </el-col>
              <el-col :span="8">
                <el-date-picker
                  v-model="dateRange"
                  type="daterange"
                  size="small"
                  style="width: 100%"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="handleDateChange"
                />
              </el-col>
            </el-row>
          </div>

          <!-- 数据表格 -->
          <div class="results-container">
            <el-table
              :data="dataList"
              v-loading="loading"
              size="small"
              height="380"
              @row-click="viewOnMap"
              style="width: 100%"
              highlight-current-row
            >
              <el-table-column
                prop="fileName"
                label="文件名称"
                min-width="200"
              >
                <template #default="{ row }">
                  <el-tooltip :content="row.fileName" placement="top">
                    <span class="text-overflow">{{ row.fileName }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column
                prop="monitorDate"
                label="监测日期"
                width="100"
                :formatter="dateFormatter"
              />
              <el-table-column
                prop="irrigationArea"
                label="灌区"
                width="120"
              >
                <template #default="{ row }">
                  <el-tag size="small" type="primary">{{
                    row.irrigationArea
                  }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="etType"
                label="数据类型"
                width="100"
              >
                <template #default="{ row }">
                  <el-tag 
                    size="small" 
                    :type="getEtTypeColor(row.etType)"
                  >
                    {{ row.etType }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="80" fixed="right">
                <template #default="{ row }">
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click.stop="viewOnMap(row)"
                  >
                    查看
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
              <el-pagination
                v-model:current-page="queryParams.page"
                v-model:page-size="queryParams.pageSize"
                :page-sizes="[10, 20, 50]"
                :total="total"
                layout="total, sizes, prev, pager, next"
                small
                @size-change="loadData"
                @current-change="loadData"
              />
            </div>
          </div>
        </el-card>
      </div>

      <!-- 数据面板切换按钮 -->
      <div class="data-panel-toggle" @click="showDataPanel = !showDataPanel">
        <el-icon><List /></el-icon>
        <span>耗水过程解析</span>
      </div>

      <!-- 地图容器 -->
      <div id="map-container" :style="`height:${view.height}px`"></div>

      <!-- 鼠标位置显示 -->
      <div id="mouse-position" class="position_coordinate"></div>


      <!-- 图例切换按钮 -->
      <div 
        class="legend-toggle" 
        v-show="currentLayerLoaded"
        @click="showLegend = !showLegend"
      >
        <el-icon><DataBoard /></el-icon>
        <span>图例</span>
      </div>

      <!-- 图例面板 -->
      <div class="legend-panel" v-show="showLegend && currentLayerLoaded">
        <div class="legend-header">
          <el-button
            link
            @click="showLegend = false"
            :icon="Close"
            size="small"
            class="legend-close-btn"
          ></el-button>
        </div>
        <div class="legend-content">
          <div class="color-bar">
            <div 
              v-for="(item, index) in legendData" 
              :key="index"
              class="color-segment"
              :style="{ backgroundColor: item.color }"
            ></div>
          </div>
          <div class="value-labels">
            <div class="label-row">
              <span class="min-label">{{ legendData[0]?.value }}</span>
              <span class="max-label">{{ legendData[legendData.length - 1]?.value }}</span>
            </div>
            <div class="middle-labels">
              <span 
                v-for="(item, index) in legendData.slice(1, -1)" 
                :key="index"
                class="middle-label"
                :style="{ left: `${((index + 1) / (legendData.length - 1)) * 100}%` }"
              >
                {{ item.value }}
              </span>
            </div>
          </div>
          <div class="unit-label">单位: mm/天</div>
        </div>
      </div>

      <!-- 图例切换按钮 -->
      <div 
        class="legend-toggle" 
        v-show="currentLayerLoaded"
        @click="showLegend = !showLegend"
      >
        <el-icon><DataBoard /></el-icon>
        <span>图例</span>
      </div>

      <!-- 底图选择面板 -->
      <div style="position: relative">
        <el-card
          v-show="editBoard"
          style="max-width: 480px"
          class="edit-container"
        >
          <div class="tool-body">
            <el-card class="base-layer-card" size="small">
              <template #header>
                <div class="base-layer-header">
                  <span>底图选择</span>
                  <el-button
                    link
                    class="button"
                    @click="editBoard = false"
                    :icon="Close"
                  ></el-button>
                </div>
              </template>
              <div class="base-layer-container">
                <el-card
                  :class="`${currentBaseLayer == layer.type ? 'active' : ''}`"
                  v-for="layer in baseLayers"
                  :key="layer.type"
                  :body-style="{ padding: '0px' }"
                  class="img-card"
                  @click="baseImageClickHandler(layer)"
                >
                  <el-image
                    style="width: 74px; height: 54px"
                    :src="layer.img"
                    :fit="'fill'"
                  />
                  <div style="padding: 5px">
                    <span>{{ layer.name }}</span>
                  </div>
                </el-card>
              </div>
            </el-card>
          </div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { Close, List, DataBoard } from "@element-plus/icons-vue";
import { Map, View } from "ol";
import { Tile as TileLayer, Image } from "ol/layer";
import { WMTS, ImageWMS, TileWMS } from "ol/source";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import { get } from "ol/proj";
import MousePosition from "ol/control/MousePosition";
import { format as formatAxirs } from "ol/coordinate";
import "ol/ol.css";
import { ScaleLine, defaults as defaultControls } from "ol/control";
import { getWidth, getTopLeft } from "ol/extent";
import baseImg1 from "@/assets/img/vec.jpg";
import baseImg2 from "@/assets/img/img.jpg";
import baseImg3 from "@/assets/img/ter.jpg";
import config from "@/config/config";
import router from "@/router";
import { ElMessage } from "element-plus";
import axios from "axios";

// 地图相关变量
let map;
const resolutions = [];
const projection = get("EPSG:4326");
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;

// 初始化分辨率
for (let z = 2; z < 19; ++z) {
  resolutions[z] = size / Math.pow(2, z);
}

// 响应式数据
const editBoard = ref(true);
const currentBaseLayer = ref("imgLayer");
const showDataPanel = ref(false);
const loading = ref(false);
const dataList = ref([]);
const total = ref(0);
const dateRange = ref([]);

// 图例相关
const showLegend = ref(false);
const currentLayerLoaded = ref(false);
const type2=ref(false)

// 图例数据 - 基于SLD文件的颜色映射 (耗水过程解析)
const legendData = [
  { value: 0, color: '#f99d59' },
  { value: 1, color: '#f99d59' },
  { value: 2, color: '#fec981' },
  { value: 3, color: '#ffedab' },
  { value: 4, color: '#ebf7ad' },
  { value: 4, color: '#c4e687' },
  { value: 5, color: '#96d265' },
  { value: 6, color: '#58b453' },
  { value: 7, color: '#1a9641' },
  { value: 8, color: '#1a9641' }
];

// 查询参数
const queryParams = reactive({
  page: 1,
  pageSize: 20,
  irrigationArea: "",
  etType: "",
  resultType: "耗水过程解析",
  startDate: "",
  endDate: "",
});

// 底图配置
const baseLayers = [
  { type: "vecLayer", name: "矢量底图", img: baseImg1 },
  { type: "imgLayer", name: "影像底图", img: baseImg2 },
  { type: "terLayer", name: "地形晕渲", img: baseImg3 },
];

// 视图高度
const view = reactive({
  height: window.innerHeight,
});

// API基础URL
const API_BASE_URL = "/algorithmApi/api/detection-results";

// 备用数据
const fallbackData = [
  {
    id: 1,
    fileName: "20240521_union_WGS84",
    monitorDate: "2024-12-30",
    irrigationArea: "石津灌区",
    etType: "降雨ET",
    resultType: "耗水过程解析",
    createTime: "2024-12-30",
    box: "[106.30142049405629,40.17679175613195,109.43618150951978,41.306333394383834]",
  },
  {
    id: 2,
    fileName: "20240521_union_WGS84",
    monitorDate: "2024-12-30",
    irrigationArea: "河套灌区",
    etType: "灌溉ET",
    resultType: "耗水过程解析",
    createTime: "2024-12-30",
    box: "[106.30142049405629,40.17679175613195,109.43618150951978,41.306333394383834]",
  },
  {
    id: 3,
    fileName: "2024122912.LDASOUT_DOMAIN_B1_clip",
    monitorDate: "2024-12-29",
    irrigationArea: "石津灌区",
    etType: "其他ET",
    resultType: "耗水过程解析",
    createTime: "2024-12-29",
    box: "[106.30142049405629,40.17679175613195,109.43618150951978,41.306333394383834]",
  },
  {
    id: 4,
    fileName: "2024122812.LDASOUT_DOMAIN_B2_clip",
    monitorDate: "2024-12-28",
    irrigationArea: "河套灌区",
    etType: "灌溉ET",
    resultType: "耗水过程解析",
    createTime: "2024-12-28",
    box: "[106.30142049405629,40.17679175613195,109.43618150951978,41.306333394383834]",
  },
];

// 获取ET类型颜色
const getEtTypeColor = (etType) => {
  switch (etType) {
    case "降雨ET": return "info";
    case "灌溉ET": return "success";
    case "其他ET": return "warning";
    default: return "";
  }
}



// 使用备用数据
const useFallbackData = () => {
  let filtered = [...fallbackData];

  if (queryParams.irrigationArea) {
    filtered = filtered.filter(item => item.irrigationArea === queryParams.irrigationArea);
  }

  if (queryParams.etType) {
    filtered = filtered.filter(item => item.etType === queryParams.etType);
  }

  if (queryParams.startDate && queryParams.endDate) {
    filtered = filtered.filter(item => {
      const monitorDate = new Date(item.monitorDate);
      const startDate = new Date(queryParams.startDate);
      const endDate = new Date(queryParams.endDate);
      return monitorDate >= startDate && monitorDate <= endDate;
    });
  }

  const startIndex = (queryParams.page - 1) * queryParams.pageSize;
  const endIndex = startIndex + queryParams.pageSize;
  
  dataList.value = filtered.slice(startIndex, endIndex);
  total.value = filtered.length;
};

// 加载数据
const loadData = async () => {
  loading.value = true;
  try {
    const response = await axios.get(`${API_BASE_URL}/soil-et`, { 
      params: queryParams 
    });

    if (response.data.code === 200) {
      dataList.value = response.data.data.list || [];
      total.value = response.data.data.total || 0;
    } else {
      ElMessage.error(response.data.message || "数据加载失败");
      useFallbackData();
    }
  } catch (error) {
    console.error("加载耗水过程解析数据失败:", error);
    ElMessage.warning("网络异常，正在使用缓存数据");
    useFallbackData();
  } finally {
    loading.value = false;
  }
};

// 处理日期范围变化
const handleDateChange = (dates) => {
  if (dates && dates.length === 2) {
    queryParams.startDate = dates[0];
    queryParams.endDate = dates[1];
  } else {
    queryParams.startDate = "";
    queryParams.endDate = "";
  }
  queryParams.page = 1;
  loadData();
};

// 日期格式化
const dateFormatter = (row, column, cellValue) => {
  if (!cellValue) return "-";
  return new Date(cellValue).toLocaleDateString("zh-CN");
};

// 在地图上查看
const viewOnMap = (row) => {
  try {
    if (row.box) {
      const box = JSON.parse(row.box);
      if (map && Array.isArray(box) && box.length === 4) {
        map.getView().fit(box.map(Number), {
          constrainResolution: false,
          padding: [20, 20, 20, 20],
        });
        ElMessage.success(`正在查看: ${row.fileName}`);

        const newLayer = new TileLayer({
          source: new TileWMS({
            url: config.geoserver_base_url + "/geoserver/result/wms",
            params: {
              LAYERS: "result:" + row.fileName,
              VERSION: "1.1.0",
              FORMAT: "image/png",
            },
            serverType: "geoserver",
          }),
        });
        newLayer.set("name", "baseLayer");
        map.getLayers().setAt(3, newLayer);
        
        // 显示图层后启用图例
        currentLayerLoaded.value = true;
        showLegend.value = true;
      }
    } else {
      ElMessage.warning("该数据没有坐标信息");
    }
  } catch (error) {
    console.error("解析坐标失败:", error);
    ElMessage.error("坐标数据格式错误");
  }
};

// 初始化地图
const initMap = function () {
  const TIANDI_KEY = "eec7fae87888db2dc4c30c0c458fb66b";
  const matrixSet = "c";

  // 创建各种图层
  const createTileLayer = (layerType, name) => {
    const layer = new TileLayer({
      source: new WMTS({
        url: `http://t{0-6}.tianditu.com/${layerType}_${matrixSet}/wmts?tk=${TIANDI_KEY}`,
        layer: layerType,
        matrixSet: matrixSet,
        style: "default",
        crossOrigin: "anonymous",
        format: "tiles",
        wrapX: true,
        tileGrid: new WMTSTileGrid({
          origin: getTopLeft(projectionExtent),
          resolutions: resolutions,
          matrixIds: Array.from({length: 15}, (_, i) => i.toString()),
        }),
      }),
    });
    layer.set("name", name);
    return layer;
  };

  // 创建地图
  map = new Map({
    target: "map-container",
    layers: [
      createTileLayer("ter", "terLayer"),
      createTileLayer("vec", "vecLayer"),
      createTileLayer("img", "imgLayer"),
      createTileLayer("cva", "cvaLayer"),
    ],
    view: new View({
      projection: projection,
      center: [108, 41],
      zoom: 8,
    }),
    controls: defaultControls({
      attribution: true,
      zoom: false,
      rotate: true,
    }).extend([
      new MousePosition({
        coordinateFormat: function (coordinate) {
          return formatAxirs(coordinate, "经度:{x} 纬度:{y}", 2);
        },
        projection: "EPSG:4326",
        className: "custom-mouse-position",
        target: document.getElementById("mouse-position"),
      }),
      new ScaleLine({ units: "metric" })
    ]),
  });
};

// 底图切换
const baseImageClickHandler = function (layer) {
  switchBaseLayer(layer.type);
  currentBaseLayer.value = layer.type;
};

const switchBaseLayer = (layerType) => {
  if (!map) return;
  map.getLayers().forEach((layer) => {
    const layerName = layer.get("name");
    layer.setVisible(
      layerName === layerType || 
      layerName === "cvaLayer" || 
      (layerType === "imgLayer" && layerName === "cvaLayer")
    );
  });
};

// 导航按钮处理
const MPDIhandler = () => router.push("/bigScreen/11");
const buttonHandler = (num) => router.push(`/bigScreen${num}/11`);

// 组件挂载
onMounted(() => {
  setTimeout(() => {
    initMap();
    loadData();
  }, 1000);
});
</script>

<style lang="scss" scoped>
.paltform-container {
  position: relative;
}

.header {
  background: url("@/assets/bigScreen/img/title_back.png") no-repeat center;
  background-size: 100% 100%;
  width: 100%;
  height: 114px;
  display: flex;
  position: relative;
  justify-content: space-between;
  background-position: 0px -13px;
  z-index: 200;

  .tit-warp {
    position: relative;
    top: 12px;
    width: 100%;
    display: flex;
    justify-content: center;

    .tit-name {
      font-size: 28px;
      color: #d1e5ff;
      line-height: 30px;
      text-shadow: 1px 2px 0px rgba(95, 129, 151, 0.47),
        2px 4px 2px rgba(58, 99, 137, 0.15), 4px 10px 18px rgba(27, 41, 60, 0.5);
      background: linear-gradient(0deg, #ffffff 0%);
      -webkit-text-stroke: 1px #eff5ff;
      -webkit-text-fill-color: transparent;
    }
  }
}

.tab-container {
  width: 100%;
  position: absolute;
  display: flex;
  top: 20px;
  z-index: 210;

  .tab-box {
    .custom-button {
      flex: 1;
      text-align: center;
      display: inline-block;
      width: 203px;
      height: 88px;
      line-height: 70px;
      font-weight: bold;
      font-size: 16px;
      background: url("@/assets/bigScreen/img/tab_button.png") no-repeat;
      color: #c1f5ff;
      background-position: 0px -10px;
      cursor: pointer;

      &:hover, &.active {
        background: url("@/assets/bigScreen/img/tab_button_active.png") no-repeat;
        background-position: 0px -10px;
      }
    }
  }

  .left-box, .right-box {
    flex: 0.35;
    display: flex;
  }

  .middle-box {
    flex: 0.3;
  }
}

.soil-et-panel {
  position: absolute;
  top: 120px;
  left: 20px;
  width: 650px;
  z-index: 220;

  .data-card {
    background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.9));
    border: 1px solid rgba(86, 163, 240, 0.3);
    box-shadow: 0px 10px 19px 1px rgba(92, 99, 106, 0.38);

    .data-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #d1e5ff;
      font-size: 16px;
      font-weight: bold;
    }

    .filter-section {
      margin-bottom: 15px;
    }

    .results-container {
      .text-overflow {
        display: inline-block;
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .pagination-container {
        margin-top: 15px;
        text-align: center;
      }
    }
  }
}

.data-panel-toggle {
  position: absolute;
  top: 120px;
  left: 20px;
  z-index: 215;
  background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.9));
  color: #d1e5ff;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(86, 163, 240, 0.3);
  transition: all 0.3s ease;

  &:hover {
    background: linear-gradient(0deg, #1a3a52, rgba(26, 58, 82, 0.9));
    border-color: rgba(86, 163, 240, 0.6);
  }
}

// 图例面板样式
.legend-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  width: 200px;
  z-index: 220;
  background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.95));
  border: 1px solid rgba(86, 163, 240, 0.3);
  border-radius: 5px;
  box-shadow: 0px 10px 19px 1px rgba(92, 99, 106, 0.38);
  backdrop-filter: blur(5px);

  .legend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid rgba(86, 163, 240, 0.2);

    .legend-title {
      color: #d1e5ff;
      font-size: 14px;
      font-weight: bold;
    }

    .legend-close-btn {
      color: #d1e5ff;
      padding: 0;
      
      &:hover {
        color: #56a3f0;
      }
    }
  }

  .legend-content {
    padding: 15px;

    .color-bar {
      display: flex;
      height: 20px;
      margin-bottom: 10px;
      border: 1px solid rgba(86, 163, 240, 0.3);
      border-radius: 2px;
      overflow: hidden;

      .color-segment {
        flex: 1;
        height: 100%;
      }
    }

    .value-labels {
      position: relative;
      height: 35px;
      margin-bottom: 5px;

      .label-row {
        display: flex;
        justify-content: space-between;
        font-size: 11px;
        color: #d1e5ff;
        line-height: 1.2;
      }

      .middle-labels {
        position: relative;
        height: 20px;

        .middle-label {
          position: absolute;
          font-size: 10px;
          color: #a8c8e8;
          transform: translateX(-50%);
          top: 0;
          line-height: 1;
        }
      }
    }

    .unit-label {
      font-size: 11px;
      color: #a8c8e8;
      text-align: center;
      margin-top: 5px;
      padding-top: 8px;
      border-top: 1px solid rgba(86, 163, 240, 0.2);
    }
  }
}

// 图例切换按钮
.legend-toggle {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 215;
  background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.9));
  color: #d1e5ff;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(86, 163, 240, 0.3);
  transition: all 0.3s ease;
  font-size: 12px;

  &:hover {
    background: linear-gradient(0deg, #1a3a52, rgba(26, 58, 82, 0.9));
    border-color: rgba(86, 163, 240, 0.6);
  }
}

#map-container {
  width: 100%;
  height: 600px;
  cursor: pointer;
  position: absolute;
  top: 0;
  z-index: 10;
}

.position_coordinate {
  color: #fff;
  position: absolute;
  font-size: 14px;
  bottom: 20px;
  left: 20px;
  z-index: 999;
  text-align: center;
  line-height: 30px;
  background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.6));
  padding: 5px 10px;
  border-radius: 3px;
  border: 1px solid rgba(86, 163, 240, 0.3);
}

.edit-container {
  z-index: 100;
  position: absolute;
  background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.6));
  box-shadow: 0px 10px 19px 1px rgba(92, 99, 106, 0.38);
  border-radius: 3px;
  right: 34px;
  top: 50px;
  width: 300px;
}

.base-layer-card {
  background: none;

  .base-layer-header {
    display: flex;
    justify-content: space-between;
  }

  .base-layer-container {
    display: flex;
    justify-content: space-between;

    .active {
      border: 2px solid #56a3f0;
    }
  }

  .img-card {
    border: 2px solid hsla(210, 96%, 54%, 0);
    cursor: pointer;

    &:hover {
      border: 2px solid #4685c4;
    }
  }
}
</style>

<style lang="scss">
// 深度样式
.soil-et-panel {
  .el-card {
    border: 1px solid rgba(86, 163, 240, 0.3) !important;

    .el-card__header {
      background: rgba(11, 40, 59, 0.8);
      border-bottom: 1px solid rgba(86, 163, 240, 0.2);
      padding: 10px 15px !important;
    }

    .el-card__body {
      background: rgba(21, 30, 40, 0.95);
      padding: 15px !important;
    }
  }

  .el-table {
    background: transparent !important;

    th, td {
      background: transparent !important;
      color: #d1e5ff !important;
      border-bottom: 1px solid rgba(86, 163, 240, 0.2) !important;
    }

    tr:hover td {
      background: rgba(86, 163, 240, 0.1) !important;
    }

    .current-row td {
      background: rgba(86, 163, 240, 0.2) !important;
    }
  }

  .el-pagination {
    background: transparent !important;

    .btn-prev,
    .btn-next,
    .el-pager li {
      background: rgba(11, 40, 59, 0.8) !important;
      color: #d1e5ff !important;
      border: 1px solid rgba(86, 163, 240, 0.3) !important;

      &:hover {
        background: rgba(86, 163, 240, 0.3) !important;
      }

      &.is-active {
        background: #56a3f0 !important;
        color: #fff !important;
      }
    }
  }

  .filter-section {
    .el-select,
    .el-date-editor {
      .el-input__wrapper {
        background: rgba(11, 40, 59, 0.8) !important;
        border: 1px solid rgba(86, 163, 240, 0.3) !important;
        color: #d1e5ff !important;

        .el-input__inner {
          color: #d1e5ff !important;
        }
      }
    }
  }
}
// 图例面板样式
.legend-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  width: 200px;
  z-index: 220;
  background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.95));
  border: 1px solid rgba(86, 163, 240, 0.3);
  border-radius: 5px;
  box-shadow: 0px 10px 19px 1px rgba(92, 99, 106, 0.38);
  backdrop-filter: blur(5px);

  .legend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid rgba(86, 163, 240, 0.2);

    .legend-title {
      color: #d1e5ff;
      font-size: 14px;
      font-weight: bold;
    }

    .legend-close-btn {
      color: #d1e5ff;
      padding: 0;
      
      &:hover {
        color: #56a3f0;
      }
    }
  }

  .legend-content {
    padding: 15px;

    .color-bar {
      display: flex;
      height: 20px;
      margin-bottom: 10px;
      border: 1px solid rgba(86, 163, 240, 0.3);
      border-radius: 2px;
      overflow: hidden;

      .color-segment {
        flex: 1;
        height: 100%;
      }
    }

    .value-labels {
      position: relative;
      height: 35px;
      margin-bottom: 5px;

      .label-row {
        display: flex;
        justify-content: space-between;
        font-size: 11px;
        color: #d1e5ff;
        line-height: 1.2;
      }

      .middle-labels {
        position: relative;
        height: 20px;

        .middle-label {
          position: absolute;
          font-size: 10px;
          color: #a8c8e8;
          transform: translateX(-50%);
          top: 0;
          line-height: 1;
        }
      }
    }

    .unit-label {
      font-size: 11px;
      color: #a8c8e8;
      text-align: center;
      margin-top: 5px;
      padding-top: 8px;
      border-top: 1px solid rgba(86, 163, 240, 0.2);
    }
  }
}

// 图例切换按钮
.legend-toggle {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 215;
  background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.9));
  color: #d1e5ff;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(86, 163, 240, 0.3);
  transition: all 0.3s ease;
  font-size: 12px;

  &:hover {
    background: linear-gradient(0deg, #1a3a52, rgba(26, 58, 82, 0.9));
    border-color: rgba(86, 163, 240, 0.6);
  }
};
</style>